// Echarts
import { FC, useEffect, useState } from 'react';
import * as echarts from 'echarts';
import { Row, Col, Button } from 'antd'
import { getData } from '../../api/data';
interface IEChartsProps { }

const ECharts: FC<IEChartsProps> = () => {
// 图表展示基础数据
const [data, setData] = useState([5, 20, 36, 10, 10, 20])
// 修改数据
const changeData = () => {
   const arr = [5, 20, 36, 10, 10, 20]
 const newArr: number[] = []
 arr.forEach(item => {
   newArr.push(item + Math.floor(100 + Math.random() * 100))
 })
 setData(newArr)
}
// 渲染 echarts 柱状图
useEffect(() => {
 var myBarChart = echarts.init(document.getElementById('barECharts') as HTMLDivElement);
 const option = {
   title: {
     text: '柱状图'
   },
   tooltip: {},
   xAxis: {
     data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
   },
   yAxis: {},
   legend: {
     layout: 'vertical',
     align: 'right',
     verticalAlign: 'middle'
   },
   series: [
     {
       name: '销量',
       type: 'bar',
       data
     },
     {
       name: '业绩',
       type: 'bar',
       data: [20, 36, 10, 10, 20, 60]
     }
   ]
 }
 myBarChart.setOption(option)
}, [data])
// 渲染 折线图
useEffect(() => {
 var myLineChart = echarts.init(document.getElementById('lineCharts') as HTMLDivElement);
 const option = {
   title: {
     text: '折线图'
   },
   tooltip: {},
   xAxis: {
     data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
   },
   yAxis: {},
   series: [
     {
       name: '销量',
       type: 'line',
       data
     }
   ]
 }
 myLineChart.setOption(option)
}, [data])
// 饼状图
useEffect(() => {
 var myPieChart = echarts.init(document.getElementById('pieECharts') as HTMLDivElement);
 const option = {
   title: {
     text: '饼状图'
   },
   tooltip: {},
   xAxis: {
     data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
   },
   yAxis: {},
   series: [
     {
       name: '销量',
       type: 'pie',
       data
     }
   ]
 }
 myPieChart.setOption(option)
}, [data])

// 基于 接口返回的数据渲染饼状图
const [dbData, setDbData] = useState([])
const getSdata = async () => {
 const res = await getData()
 // 这里我们对数据进行了重新设置以后，那么监听的依赖 dbData 就会造成无限死循环
 setDbData(res.data.data)
}
// 这里一定要注意：我们 gerSdata 会修改 dbData，所以，需要初始化的时候调用即可
useEffect(() => {
 getSdata()
}, [])

useEffect(() => {
 var mydbECharts = echarts.init(document.getElementById('dbECharts') as HTMLDivElement)
 const xAxisArr: string[] = []
 const dataArr: number[] = []
 dbData.forEach((item: { x: string, val: number }) => {
   xAxisArr.push(item.x)
   dataArr.push(item.val)
 })
 const option = {
   title: {
     text: '饼状图'
   },
   tooltip: {},
   xAxis: {
     data: xAxisArr
   },
   yAxis: {},
   series: [
     {
       name: '销量',
       type: 'line',
       data: dataArr
     }
   ]
 }
 mydbECharts.setOption(option)
 window.addEventListener('resize', () => {
   mydbECharts && mydbECharts.resize();
 })
}, [dbData])

return (
 <>
   <div><Button onClick={changeData}>切换数据</Button></div>
   <Row gutter={30}>
     <Col span={8}>
       <div id="barECharts" style={{ width: 400, height: 300, backgroundColor: '#efefef', margin: '20px 0' }}></div>
     </Col>
     <Col span={8}>
       <div id="lineCharts" style={{ width: 400, height: 300, backgroundColor: '#efefef', margin: '20px 0' }}></div>
     </Col>
   </Row>
   <Row gutter={30}>
     <Col span={8}>
       <div id="pieECharts" style={{ width: 400, height: 300, backgroundColor: '#efefef', margin: '20px 0' }}></div>
     </Col>
     <Col span={8}>
       <div id="dbECharts" style={{ width: 400, height: 300, backgroundColor: '#efefef', margin: '20px 0' }}></div>
     </Col>
   </Row>
 </>
)
};
export default ECharts;